<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { deviceViewServer } from '@/api'
const optionData = {
  tooltip: {
    trigger: 'axis',
    borderColor: '#0F2638',
    backgroundColor: '#0F2638DB',
    textStyle: {
      color: '#fff',
      fontSize: 14,
      marginLeft: '-20px'
    },
    formatter: function (params) {
      return `<div>${params[0].name}<br/> ${params[0].data} 个</div>`
    }
  },
  grid: {
    left: '5%',
    right: '2%',
    bottom: '2%',
    top: '15%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      // 插入数值
      data: ['直升机/eVTOL', '起降场', '机巢'],
      xlevel: 0,
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,0.7)',
          fontSize: 12
        },
        interval: 0
        // rotate: 10
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, .5)'
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, .2)'
        }
      }, //设置网格
      axisTick: {
        show: false
      }
    },
    {
      type: 'category',
      // 插入数值
      xlevel: 1,
      axisLabel: {
        show: false,
        textStyle: {
          color: 'rgba(255,255,255)',
          fontSize: 12
        },
        interval: 0,
        rotate: 45
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255, 255, 255, .5)'
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, .2)'
        }
      }, //设置网格
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisTick: 'none',
      axisLine: 'none',
      offset: '5',
      axisLabel: {
        textStyle: {
          color: '#85B9CB',
          fontSize: '12'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, .2)'
        }
      } //设置网格
    }
  ],
  series: [
    {
      type: 'bar',
      xAxisIndex: 0,
      data: ['', '', ''],
      barWidth: 10,
      itemStyle: {
        normal: {
          borderColor: 'rgba(91, 226, 255, 1)',
          borderWidth: 1,
          color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(91, 226, 255, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(91, 226, 255, 1)'
            }
          ])
        }
      }
    },
    {
      name: '框',
      type: 'bar',
      xAxisIndex: 1,
      data: [100, 100, 100, 100],
      barWidth: 16,
      itemStyle: {
        normal: {
          color: 'rgba(255,255,255,.2)'
        }
      }
    }
  ]
}
const option = ref(optionData)

//起降点设施统计占比
const deviceView = async () => {
  const res = await deviceViewServer()
  const { helicopterCount, evtolcount, riseLandPointCount, machineNestCount } = res.data
  option.value.series[0].data = [evtolcount, riseLandPointCount, machineNestCount]
  const max = Math.max(...option.value.series[0].data)
  option.value.series[1].data = new Array(option.value.series[0].data.length).fill(max)
}
onMounted(() => {
  deviceView()
})
</script>
<template>
  <div class="card">
    <CommonTitle title="起降设施总览" />
    <div class="chart">
      <Charts :option="option" container="2" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  .chart {
    width: 100%;
    height: 230px;
  }
}
</style>
